<template>
  <div class="dashboard">
    <h1>仪表盘</h1>
    <div class="grid-container">
      <Chart :data="lockerData" title="快递柜空闲率" chartType="pie" />
      <Chart :data="deliveryData" title="派送量" chartType="line" />
      <Chart :data="pickupData" title="取件量" chartType="bar" />
      <Chart :data="userGrowthData" title="用户增长趋势" chartType="line" />
      <Chart :data="popularServicesData" title="最受欢迎的服务" chartType="doughnut" />
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import {useStore} from 'vuex';
import Chart from '../components/Chart.vue'; // 假设有一个图表组件

const store = useStore();
const lockerData = ref({});
const deliveryData = ref({});
const pickupData = ref({});
const userGrowthData = ref({});
const popularServicesData = ref({});

const fetchDashboardStats = () => {
  return store.dispatch('fetchDashboardStats').then(response => {
    lockerData.value = response.data.lockerData; // 假设返回的数据格式适合图表组件
    deliveryData.value = response.data.deliveryData;
    pickupData.value = response.data.pickupData;
    userGrowthData.value = response.data.userGrowthData;
    popularServicesData.value = response.data.popularServicesData;
  }).catch(error => {
    console.error('Error fetching dashboard stats:', error);
  });
};

onMounted(() => {
  fetchDashboardStats();
});
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  max-height: calc(3 * (300px + 20px)); /* 每列最多3个图表 */
  overflow-y: auto; /* 允许垂直滚动 */
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}
</style>



